
// 主内容区样式
.content {
  flex: 1;
  padding-bottom: 120rpx; // 为底部导航留出空间
  background-color: @bg-color;
}
.footer {
  padding-bottom: 150rpx;
}
.content.android {
  height: calc(100vh - @header-bar-height-android);
}
.content.ios {
  height: calc(100vh - @header-bar-height-ios);
}

// 等级卡片容器
.levels-container {
  padding: @spacing-md;
}

// 等级卡片样式
.level-card {
  display: flex;
  background-color: @card-bg;
  padding: @spacing-lg;
  margin-bottom: @spacing-md;
  border-radius: @card-radius;
  border: 1px solid @border-light;
  box-shadow: @card-shadow;
  transition: @transition, transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;

  // 钓鱼主题装饰元素 - 水波纹背景
  &::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 200rpx;
    height: 200rpx;
    background-image: url("/images/credit/water-ripple.svg");
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 0;
  }

  &:hover {
    box-shadow: @hover-shadow;
    transform: translateY(-2rpx);
  }
}

// 当前选中的卡片样式
.level-card.active {
  border-color: @primary-color;
  background-color: @primary-light;
  box-shadow: 0 8rpx 24rpx rgba(7, 193, 96, 0.1);

  .level-number {
    background-color: @primary-color;
  }
}

// 等级徽章样式
.level-badge {
  position: relative;
  width: 140rpx;
  height: 140rpx;
  margin-right: @spacing-lg;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge-inner {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(circle, #FFFFFF 0%, #F0F9F4 100%);
  border: 2px solid @border-light;
  position: relative;
}

.badge-inner::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(7, 193, 96, 0.1) 0%, rgba(7, 193, 96, 0) 100%);
  pointer-events: none;
}

// 等级数字
.level-number {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  width: 56rpx;
  height: 56rpx;
  background-color: @primary-dark;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  font-weight: bold;
  box-shadow: 0 4rpx 12rpx rgba(26, 86, 168, 0.3);
  z-index: 2;
}

// 徽章图标容器
.badge-icon {
  width: 100rpx;
  height: 100rpx;
  position: relative;
}


// 等级信息样式
.level-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  z-index: 1;
}

.info-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.info-title {
  flex: 1;
}

.level-name {
  font-size: @font-size-md;
  font-weight: bold;
  color: @text-primary;
  margin-bottom: @spacing-xs;
  display: inline-block;
  position: relative;
}

.level-name::after {
  content: '';
  position: absolute;
  bottom: -8rpx;
  left: 0;
  width: 40rpx;
  height: 6rpx;
  background-color: @primary-color;
  border-radius: 3rpx;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.level-card-active .level-name::after {
  opacity: 1;
}

.level-material {
  font-size: @font-size-xs;
  color: @text-secondary;
  margin-top: @spacing-xs;
  line-height: 1.6;
}

.arrow-right {
  width: 44rpx;
  height: 44rpx;
  background-image: url("/images/credit/arrow-right.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24rpx;
  flex-shrink: 0;
  margin-left: @spacing-sm;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.level-card:hover .arrow-right {
  opacity: 1;
}

.level-card-active .arrow-right {
  opacity: 1;
  transform: translateX(4rpx);
  transition: transform 0.3s ease;
}

.level-desc {
  font-size: @font-size-sm;
  color: @text-secondary;
  margin-top: @spacing-md;
  line-height: 1.6;
  padding-top: @spacing-md;
  border-top: 1px solid @border-light;
}

.level-tags {
  display: flex;
  flex-wrap: wrap;
  gap: @spacing-sm;
  margin-top: @spacing-md;
}

.tag {
  font-size: @font-size-mini;
  padding: 6rpx 16rpx;
  background-color: @bg-tertiary;
  color: @text-tertiary;
  border-radius: 20rpx;
  transition: @transition;
  border: 1px solid @border-light;
}

.tag-current {
  background-color: @primary-light;
  color: @primary-color;
  border-color: @primary-color;
  box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.15);
}

// 等级进度指示器
.level-progress {
  display: flex;
  align-items: center;
  margin-top: @spacing-md;
}

.progress-bar {
  flex: 1;
  height: 10rpx;
  background-color: @border-light;
  border-radius: 5rpx;
  overflow: hidden;
  position: relative;
}

.progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, @primary-color 0%, @success-color 100%);
  border-radius: 5rpx;
  transition: width 0.6s ease;
  box-shadow: 0 0 12rpx rgba(7, 193, 96, 0.3);
}

.progress-text {
  font-size: @font-size-xs;
  color: @text-tertiary;
  margin-left: @spacing-sm;
  min-width: 120rpx;
  text-align: right;
}

// 升级提示卡片
.upgrade-card {
  background-color: @secondary-light;
  border: 1px solid @secondary-color;
  border-radius: @card-radius;
  padding: @spacing-lg;
  margin: @spacing-lg 0;
  position: relative;
  overflow: hidden;
}

.upgrade-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 200rpx;
  height: 200rpx;
  background-image: url("/images/credit/upgrade-badge.svg");
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 0;
}

.upgrade-title {
  font-size: @font-size-md;
  font-weight: bold;
  color: @secondary-color;
  margin-bottom: @spacing-sm;
  position: relative;
  z-index: 1;
}

.upgrade-content {
  font-size: @font-size-sm;
  color: @text-secondary;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}